<template>
  <div>
    <nav-header :headerTitle="'推荐文章'" :navBgColor="'#fff'"></nav-header>
    <div class="nav-height"></div>
    <div class="article-list" >
      <van-tabs
        v-model="active"
        :line-width="27"
        :line-height="3"
        :color="'#FE2525'"
        :title-active-color="'#303133'"
        :title-inactive-color="'#999999'"
        @click="onGetList"
      >
        <van-tab v-for="item in tabsList" :title="item.articleKindName" :id="item.id" :key="item">
          <div class="tab-bottom"></div>
          <van-list
            class="articlelist"
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="gainArticleListByPages" 
            :error.sync="error"
            error-text="请求失败，点击重新加载"
          >
            <!-- <van-cell v-for="item in articleList" :key="item" :title="item" /> -->
            <articleItem
              v-for="itemsItem in articleList"
              :articleItemInfo="itemsItem"
              :key="itemsItem"
            ></articleItem>
          </van-list> 
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import navHeader from "@/components/NavHeader";
import articleItem from "@/components/ArticleItem";
import { Tab, Tabs, List } from "vant";
 
Vue.use(Tab)
  .use(Tabs)
  .use(List);
export default {
  name: "articleList",
  components: {
    navHeader,
    articleItem
  },
  data() {
    return {
      tabsList: [],
      articleList: [],
      finished: false,
      loading: false,
      error:false,
      // 文章list 分页信息
      articleCategoryId: 1,
      pageNum: 1,
      pageSize: 10
    };
  },
  mounted() {
    this.gainTabList();
  },
  methods: {
    // 获取 头部 文章类型tablist
    gainTabList() {
      this.$http.post("article/getArticleKindInfo", {}).then(
        res => {
          let resData = res.data;
          this.tabsList = resData.articleKindInfo;
          this.articleCategoryId = this.tabsList[0].id;
        },
        err => {
          console.log(err);
        }
      );
    },
    //   tab 点击
    onGetList(index) {
      this.articleList = []; 
      this.finished = false,
      this.loading = false,
      this.error =false,
      this.articleCategoryId = this.tabsList[index].id;
      this.pageNum = 1;
      this.pageSize = 10;
      this.gainArticleListByPages();
    },
    //  list加载  根据文章类型id获取文章list 分页
    gainArticleListByPages() { 
      let sendData = {
        articleCategoryId: this.articleCategoryId,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      this.$http.post("article/getArticleInfoByPagination", sendData).then(
        res => {
          let resData = res.data;
          this.articleList = this.articleList.concat(resData.items);
          ++this.pageNum;
          // 加载状态结束
          this.loading = false;
          // 数据全部加载完成
          if (resData.pages < this.pageNum) {
            this.finished = true;
          }
        },
        err => {
          this.error = true;
          console.log(err);
        }
      );
    }
  }
};
</script>

<style scoped lang="scss">
.article-list {
  .tab-bottom {
    width: 750px;
    height: 10px;
    background: rgba(242, 245, 247, 1);
  }
  .articlelist {
    width: 750px;
    height: auto;
    margin: 0 auto 30px;
  }
}
</style>
<style lang="scss">
.van-tabs__wrap {
  position: fixed;
  top: 80px;
}
.van-tabs--line .van-tabs__wrap {
  height: 110px;
}
.van-tab {
  line-height: 110px;
  font-size: 32px;
  font-family: PingFangSC-Medium;
}
.van-tab--active {
  font-weight: 700;
  font-size: 36px;
}
.van-tabs--line {
  padding-top: 110px;
}
.van-tabs__wrap--scrollable .van-tab{
  flex: auto!important;
}
</style>

